<template>
  <el-dialog title="查看租期" :visible.sync="dialogVisible" width="1000px">
    <el-table :data="tableData" border>
      <el-table-column align="center" label="期数" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.which_period }}/{{ scope.row.month_total }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="租期" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.begin_time }} 至 {{ scope.row.end_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="租金" width="120">
        <template slot-scope="scope">
          <span>￥{{ scope.row.rent }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 0 || scope.row.status == 4 ? '' : 'success'">
            {{ scope.row.status == 1 ? "已支付" : scope.row.status == 2 ? "已退款" : scope.row.status == 3 ? "已买断" : scope.row.status == 4 ? "已逾期" : scope.row.status == 5 ? "线下支付" : "未支付" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付时间" prop="pay_time" width="100" />
      <el-table-column align="center" label="预计扣款日" prop="begin_time" width="100" />
      <el-table-column align="center" label="还款报送时间" prop="result3_time" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.result3_time == null ? '无' : scope.row.result3_time" placement="top-start">
            <el-tag :type="scope.row.result3_time == null ? '' : 'success'">
            {{ scope.row.result3_time == null ? '无' : '查看时间' }}
          </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="代偿报送时间" prop="result4_time" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.result4_time == null ? '无' : scope.row.result4_time" placement="top-start">
            <el-tag :type="scope.row.result4_time == null ? '' : 'success'">
            {{ scope.row.result4_time == null ? '无' : '查看时间' }}
          </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="追偿报送时间" prop="result5_time" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.result5_time == null ? '无' : scope.row.result5_time" placement="top-start">
            <el-tag :type="scope.row.result5_time == null ? '' : 'success'">
            {{ scope.row.result5_time == null ? '无' : '查看时间' }}
          </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="代偿金额" prop="result4_money" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.result4_money == null ? '无' : scope.row.result4_money" placement="top-start">
            <el-tag :type="scope.row.result4_money == null ? '' : 'success'">
            {{ scope.row.result4_money == null ? '无' : '查看代偿金额' }}
          </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="追偿金额" prop="result5_money" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.result5_money == null ? '无' : scope.row.result5_money" placement="top-start">
            <el-tag :type="scope.row.result5_money == null ? '' : 'success'">
            {{ scope.row.result5_money == null ? '无' : '查看追偿金额' }}
          </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      
      <!-- <el-table-column fixed="right" align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="viewLog(scope.row)">查看记录</el-button>
          <el-button v-if="scope.row.is_withhold == 1 && scope.row.pay_type != 1 && $hasMethod('#withhold')" type="warning" size="mini" @click="withholdItem(scope.row)">发起代扣</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </div>
    <deduct-log ref="deductLog" :order-no="selectedItem.trade_no" :lease-id="selectedItem.id" />
  </el-dialog>
</template>

<script>
import { getLease } from '@/api/order'
import { manualWithholding, withholdSwitch } from '@/api/finance'
import deductLog from './deductLog'
export default {
  // props: ['orderId'],
  props: {
    orderId: {
      type: String,
      default: ''
    }
  },
  components: { deductLog },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      selectedItem: {}
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        getLease(this.orderId).then((res) => {
          this.tableData = res || []
        })
      }
    }
  },
  methods: {
    switchChange(row) {
      withholdSwitch({
        orderId: row.order_id,
        leaseId: row.id,
        withholdStatus: row.withhold_status
      }).then((res) => {
        this.$parent.getList(true)
      });
    },
    viewLog(row) {
      this.selectedItem = { ...row }
      this.$refs.deductLog.dialogVisible = true
    },
    mouseover(e){
      console.log(e);
    },
    withholdItem(row) {
      this.$confirm('您确定要发起代扣吗？', '发起代扣', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
          manualWithholding({
            orderId: row.order_id,
            leaseId: row.id,
          }).then((res) => {
            setTimeout(() => {
              this.$parent.getList(true);
            }, 1000)
          })
        }).catch(() => { })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  max-height: 650px;
  overflow: auto;
}
</style>
